<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Element-UI Icons" name="first">
        <ul class="icon-list">
          <li v-for="item of elementIcons" :key="item" @click="generateIconCode(item)">
            <span>
              <i :class="'el-icon-' + item"/>
              <span class="icon-name">el-icon-{{ item }}</span>
            </span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="Iconfont Icons" name="second">
        <div class="grid">
          Iconfont
        </div>
      </el-tab-pane>
      <el-tab-pane label="Simple-line Icons" name="three">
        <div class="grid">
          Simple-line
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import elementIcons from '../../icons/element-icons'

export default {
  name: 'IconManage',
  components: {},
  data() {
    return {
      name: '图标',
      height: 680,
      activeName: 'first',
      elementIcons: elementIcons,
      checked: ''
    }
  },
  created() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 取消
    cancelCallback() {
      this.checked = ''
      this.$emit('cancelCallback')
    },
    // 确认
    generateIconCode(symbol) {
      this.checked = 'el-icon-' + symbol
      this.$emit('submitCallback', this.checked)
    }
  }
}
</script>

<style scoped>
ul.icon-list {
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border: 1px solid #eaeefb;
  border-radius: 4px;
}

.icon-list li {
  float: left;
  width: 16.66%;
  text-align: center;
  height: 120px;
  line-height: 120px;
  color: #666;
  font-size: 13px;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-right: -1px;
  margin-bottom: -1px;
  cursor: pointer;
}

.icon-list li:after {
  content: "";
  height: 100%;
}

.icon-list li:after,.icon-list li span {
  display: inline-block;
  vertical-align: middle;
}

.icon-list li span {
  line-height: normal;
  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
  color: #99a9bf;
  transition: color .15s linear;
}

.icon-list li i {
  display: block;
  font-size: 32px;
  margin-bottom: 15px;
  color: #606266;
  transition: color .15s linear;
}

.icon-list li .icon-name {
  display: inline-block;
  padding: 0 3px;
  height: 1em;
}

.icon-list li:hover i,.icon-list li:hover span {
  color: #5cb6ff;
}

.icon-list li:hover {
  background-color: #f0f2f5;
}
</style>
